<template>
  <div>

    <!--    卡片1-->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>销售订单</span>
      </div>
      <div>
        <el-button type="text" class="top-button" @click="orderAll">全部订单</el-button>
        <el-button type="text" class="top-button" @click="noShip">待发货</el-button>
        <el-button type="text" class="top-button" @click="findPut">待收货</el-button>
        <el-button type="text" class="top-button" @click="NoPay">待付款</el-button>
        <el-button type="text" class="top-button" @click="overDeal">交易完成</el-button>
      </div>
    </el-card>

    <!--    卡片2-->
    <el-card class="box-card2">

      <el-form :inline="true" ref="searchForm" :model="keyword" class="demo-form-inline">
        <el-form-item>
          <el-button type="primary" icon="el-icon-upload2" @click="addOrder" size="small">新增</el-button>
        </el-form-item>
        <el-form-item label="客户名称：">
          <el-input v-model="keyword.orderPeople" placeholder="请输入"></el-input>
        </el-form-item>
        <el-form-item label="订单编号：">
          <el-input v-model="keyword.orderNum" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="search" size="small">搜索</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="empty" size="small">清空</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-upload2" @click="upLoad" size="small">导入</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-download" @click="downLoad" size="small">导出</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit" icon="el-icon-plus" size="small">新增销售单</el-button>
        </el-form-item>
      </el-form>

      <el-table
        ref="multipleTable"
        :data="tableData"
        tooltip-effect="dark"
        style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="orderNum"
          label="订单编号"
          width="150">
        </el-table-column>
        <el-table-column
          prop="orderPay"
          label="支付方式"
          width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.orderPay == '0' ? '微信' : scope.row.orderPay == '1' ? '支付宝' : '未付款' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderPaySta"
          label="支付状态"
          width="150">
          <template slot-scope="scope">
            <span>{{ scope.row.orderPaySta == '1' ? '已付款' : '未付款' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderMoney"
          label="金额"
          width="90">
        </el-table-column>
        <el-table-column
          prop="orderTime"
          label="下单时间"
          width="150">
        </el-table-column>
        <el-table-column
          prop="orderShipSta"
          label="发货状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.orderShipSta == '1' ? '已发货' : '未发货' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderConfSta"
          label="确认状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.orderConfSta == '1' ? '已确认' : '未确认' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderAfterSta"
          label="售后状态"
          width="100">
          <template slot-scope="scope">
            <span>{{ scope.row.orderAfterSta == '1' ? '正常' : '异常' }}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="orderPeople"
          label="收货人"
          width="100">
        </el-table-column>
        <el-table-column
          prop="address"
          label="操作"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="shipments(scope.row)" type="success">发货
            </el-button>
            <el-button
              size="mini"
              type="info"
              @click="moreMessage(scope.row)">详情
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!--    分页-->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[ 10, 20,50]"
        :page-size="100"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>

    <!--    添加的表单-->
    <el-dialog :title="dialogName" :visible.sync="isShow" width="60%">
      <el-card class="form-card">
        <div slot="header" class="clearfix">
          <span>订单信息</span>
        </div>
        <el-form :model="order" :inline="true">
          <el-form-item label="订单编号" prop="orderNum" label-width="80px">
            <el-input :disabled="true" v-model="order.orderNum" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="支付状态" prop="orderPay" label-width="80px">
            <el-input v-model="order.orderPaySta" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="物流状态" prop="orderShipSta" label-width="80px">
            <el-input v-model="order.orderShipSta" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="创建时间" prop="orderTime" label-width="80px">
            <el-input v-model="order.orderTime" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="订单金额" prop="orderTime" label-width="80px">
            <el-input v-model="order.orderMoney" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>

        <!--      详情页的用户详细信息-->

        <el-form :model="client" :inline="true">
          <el-form-item label="客户名称" prop="cliName" label-width="80px">
            <el-input :disabled="true" v-model="client.cli_name" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="地址" prop="cliHome" label-width="80px">
            <el-input v-model="client.cli_home" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="联系人" prop="cliName" label-width="80px">
            <el-input v-model="client.cli_name" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="cliPhone" label-width="80px">
            <el-input v-model="client.cli_phone" autocomplete="off" style="width: 200px"></el-input>
          </el-form-item>
        </el-form>


        <!--      详情页的商品详细信息-->
        <el-table
          :data="goods"
          style="width: 100%">
          <el-table-column
            prop="gdName"
            label="商品名"
          >
          </el-table-column>
          <el-table-column
            prop="gdCategory"
            label="商品类别">
          </el-table-column>
          <el-table-column
            prop="gdUnit"
            label="商品单位">
          </el-table-column>

          <el-table-column
            prop="gdPrice"
            label="商品单价">
          </el-table-column>
          <el-table-column
            prop="fkGoodsNum"
            label="商品数量">
          </el-table-column>
        </el-table>
      </el-card>
    </el-dialog>

    <!--     新增订单按钮展示的页面-->
    <el-dialog :title="addName" :visible.sync="show" width="50%">
      <div class="block">
        <h3>选择客户信息</h3>
      </div>
      <el-table
        ref="multipleTable"
        :data="client"
        style="width: 100%"
        @selection-change="handleSelectionChange3">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="cliName"
          label="名称">
        </el-table-column>
        <el-table-column
          prop="cliHome"
          label="地址">
        </el-table-column>
        <el-table-column
          prop="cliPhone"
          label="联系电话">
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="cancel">取消</el-button>
        <el-button type="primary" @click="next1">下一步</el-button>
      </div>
    </el-dialog>

    <!--    用户信息下一步后展示商品页面-->
    <el-dialog :title="goodsForm" :visible.sync="show2" width="70%">

      <div class="block">
        <h3>选择商品种类</h3>
      </div>
      <el-table
        ref="multipleTable"
        :data="goodsAll"
        style="width: 100%"
        @selection-change="handleSelectionChange2">
        <el-table-column
          type="selection"
          width="55">
        </el-table-column>
        <el-table-column
          prop="gdName"
          label="商品名称">
        </el-table-column>
        <el-table-column
          prop="gdCategory"
          label="商品分类">
        </el-table-column>
        <el-table-column
          prop="gdUnit"
          label="单位"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="gdPrice"
          label="单价"
          show-overflow-tooltip>
        </el-table-column>
        <el-table-column
          prop="address"
          label="数量"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input-number v-model="scope.row.num" @change="handleChange(scope.row)" size="mini" :min="0" :max="9999"
                             label="描述文字"></el-input-number>
          </template>
        </el-table-column>
        <el-table-column
          prop="address"
          label="合计"
          show-overflow-tooltip>
          <template slot-scope="scope">
            <el-input v-model="scope.row.money" size="mini"
                      label="描述文字"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div>
        <el-button type="primary" @click="affirm">确认</el-button>
        <el-button type="primary" @click="cancel">取消</el-button>
      </div>
    </el-dialog>


    <!-- 上传excel的对话框 -->
    <el-dialog title="上传销售单Excel" :visible.sync="dialogExcelVisible" width="40%">
      <el-upload
        class="upload-demo"
        drag
        action="http://localhost:8088/order/form/upload/excel"
        accept=".xlsx,.xls"
        :on-success="uploadExcelSuccess"
        :on-error="uploadExcelError"
        multiple>
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">只能上传.xlsx,.xls文件，且不超过500kb</div>
      </el-upload>
    </el-dialog>

    <!--    添加按钮表单-->
    <el-dialog title="添加订单" :visible.sync="show3" width="50%">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="收货人">
          <el-input v-model="form.orderPeople"></el-input>
        </el-form-item>

        <el-form-item label="总金额">
          <el-input v-model="form.orderMoney"></el-input>
        </el-form-item>
        <el-form-item label="支付状态">
          <el-select v-model="form.orderPaySta" placeholder="请选择支付状态">
            <el-option label="未付款" value="0"></el-option>
            <el-option label="已付款" value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注">
          <el-input type="textarea" v-model="form.remark"></el-input>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onConfig">确认</el-button>
          <el-button @click="cancel2">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>

  </div>
</template>

<script>
import {
  addOrder,
  findAll,
  findAllClient,
  findGoods,
  findPut,
  findShip,
  moreCli,
  moreGood,
  NoPay,
  overDeal,
  updateShipSta
} from '@/api/sale'
import { now } from 'mockjs/src/mock/random/date'

export default {
  data() {
    return {
      value1: new Date(2016, 9, 10, 18, 40),
      value2: new Date(2016, 9, 10, 18, 40),
      tableData: [],
      cliList: [],
      pageNum: 1,
      pageSize: 10,
      total: 0,
      currentPage: 1,
      keyword: {
        orderNum: null,
        orderPeople: null
      },
      isShow: false,
      dialogName: '详情',
      order: {
        orderId: null,
        orderMoney: null,
        orderNum: '',
        orderPay: null,
        orderPaySta: null,
        orderPeople: '',
        orderShipSta: null,
        orderTime: '',
        remark: '',
        orderAfterSta: null,
        orderConfSta: null
      },
      client: [],
      goods: [],
      cardOne: 'true',
      cardTwo: 'false',
      cardThree: 'false',
      addName: '新增销售单',
      goodsForm: '商品信息',
      show: false,
      show2: false,
      options: [],
      goodsAll: [],
      num: null,
      product: {
        gdId: null,
        num: null
      },
      ids: [],
      cids: [],
      allMoney: null,
      nums: [],
      dialogExcelVisible: false,
      form: {
        orderTime: '',
        orderPay: '',
        orderConfSta: '',
        orderAfterSta: '',
        orderPeople: '',
        orderPaySta: '',
        orderMoney: '',
        remark: '',
        orderNum:'',
        orderShipSta:''
      },
      show3: false
    }
  },
  methods: {
    onSubmit() {
      this.show = true
      findAllClient().then(res => {
        // console.log(res)
        this.client = res.data
      })
    },

    // 查找全部方法
    orderAll() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        orderNum: this.keyword.orderNum,
        orderPeople: this.keyword.orderPeople
      }
      findAll(params).then(res => {
        let pageInfo = res.data
        // console.log("pageInfo",pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    },

    // 页面大小改变方法
    handleSizeChange(val) {
      this.pageSize = val // 将当前页大小存起来，方便下一方法使用
      // console.log(`每页 ${val} 条`)
      this.orderAll(this.pageNum, val, this.keyword)
    },

    // 当前页改变方法
    handleCurrentChange(val) {
      this.pageNum = val
      // console.log(`当前页: ${val}`)
      this.orderAll(val, this.pageSize, this.keyword)
    },

    handleSelectionChange() {

    },

    // 多选框改变方法
    handleSelectionChange2(selectionRowArr) {
      // console.log(selectionRowArr)
      this.ids = []
      this.nums = []
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.ids.push(selectionRowArr[i].gdId)
        this.nums.push(selectionRowArr[i].num)
      }
    },

    // 添加商品
    affirm() {
      const id = this.ids.join(',')
      // console.log(id)
      this.$confirm('是否添加id为"' + id + '"的商品', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(res => {
        console.log(this.ids)
        console.log(this.cids)
        this.show2 = false
        this.show = false
        this.$message({
          type: 'success',
          message: '添加成功'
        })
      })
    },

    // 待发货方法，点击后查找所有位发货的订单信息
    noShip() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      findShip(params).then(res => {
        let pageInfo = res.data
        // console.log('pageInfo', pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    },

    // 待收获方法
    findPut() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      findPut(params).then(res => {
        let pageInfo = res.data
        // console.log('pageInfo', pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    },

    // 待付款方法
    NoPay() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      NoPay(params).then(res => {
        let pageInfo = res.data
        // console.log('pageInfo', pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    },

    // 交易完成方法
    overDeal() {
      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize
      }
      overDeal(params).then(res => {
        let pageInfo = res.data
        // console.log('pageInfo', pageInfo)
        this.tableData = pageInfo.list
        this.total = pageInfo.total
      })
    },

    // 清空输入框内容
    empty() {
      this.keyword = {}
      this.orderAll()
    },

    // 模糊搜索
    search() {
      this.orderAll()
    },

    // 发货按钮
    shipments(row) {
      // console.log('row', row)
      if (row.orderShipSta == 1 || row.orderShipSta == 2) {
        this.$message({
          type: 'warning',
          message: '商品已发货'
        })
      } else {
        updateShipSta({ id: row.orderId }).then(res => {
          this.$message({
            type: 'success',
            message: '发货成功！！!'
          })
          this.orderAll()
        })
      }
    },

    // 详情
    moreMessage(row) {
      this.order = row
      this.isShow = true

      // 详情页中查询客户信息方法
      moreCli({ id: row.cliId }).then(res => {
        this.client = res.data
        // console.log(this.client)
      })
      moreGood({ id: row.orderId }).then(res => {
        this.goods = res.data
      })
    },

    // 添加按钮添加订单
    addOrder() {
      this.show3 = true
    },
    onConfig() {
      var getTime = new Date().getTime() //获取到当前时间戳
      var time = new Date(getTime) //创建一个日期对象
      let now = this.nowDate(time)
      var a = Math.floor(Math.random()*1000)
      this.form.orderAfterSta = 0
      this.form.orderTime = now
      this.form.orderNum = a
      this.form.orderPay = 2
      this.form.orderConfSta = 1
      this.form.orderShipSta = 0
      addOrder(this.form).then(
        this.$message({
          type: 'success',
          message: '添加成功'
        })
      ).catch(res => {
        this.$message({
          type: 'warning',
          message: '添加失败'
        })
      })
      this.show3 = false
      this.orderAll()
    },
    cancel2() {
      this.show3 = false
    },

    cancel() {
      this.show = false
      this.show2 = false
      this.client = []

    },

    handleSelectionChange3(selectionRowArr) {
      this.cids = []
      this.nums = []
      for (let i = 0; i < selectionRowArr.length; i++) {
        this.cids.push(selectionRowArr[i].cliId)
        this.nums.push(selectionRowArr[i].num)
      }
    },

    next1() {
      const id = this.cids.join(',')
      // console.log(id)
      this.$confirm('是否添加id为"' + id + '"的客户', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'success'
      }).then(res => {
        this.show = false
        this.show2 = true
        // console.log(this.client)
        findGoods().then(res => {
          this.goodsAll = res.data
          // console.log(this.goodsAll)
        })
      }).catch(res => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    handleChange(row) {
      // console.log(row.num)
      // console.log(row.gdPrice)
      let num = row.num
      let gdPrice = row.gdPrice
      let a = parseInt(num)
      let b = parseInt(gdPrice)
      let c = a * b
      row.money = c + ''
    },

    // 上传提示信息
    uploadExcelSuccess() {
      this.$message({
        type: 'success',
        message: '上传成功'
      })
      this.dialogExcelVisible = false
      this.orderAll()
    },
    uploadExcelError(err) {
      this.$message({
        type: 'error',
        message: err
      })
    },

    // 导入按钮
    upLoad() {
      this.dialogExcelVisible = true
    },

    // 导出数据
    downLoad() {
      this.$confirm('确定要导出数据吗？', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 方案一：原生js方式发起导出excel请求，后端设置响应格式
        window.location.href = 'http://localhost:8088/order/form/download/excel'
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消导出数据'
        })
      })
    },
    nowDate(time) {
      var year = time.getFullYear() // 年
      var month = (time.getMonth() + 1).toString().padStart(2, '0') // 月
      var date = time.getDate().toString().padStart(2, '0') // 日
      var hour = time.getHours().toString().padStart(2, '0'); // 时
      var minute = time.getMinutes().toString().padStart(2, '0'); // 分
      var second = time.getSeconds().toString().padStart(2, '0'); // 秒
      return (
        year + "-" + month + "-" + date + " " + hour + ":" + minute + ":" + second
      )
    }
  },
  created() {
    this.orderAll()
  }
}
</script>

<style>


.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 100%;
  height: 130px;
  margin-left: 20px;
}

.box-card2 {
  margin-top: 50px;
  width: 100%;
  margin-left: 20px;

}

.top-button {
  margin-right: 130px;
}

.form-card {
//margin-left: 20px; width: 100%;
}

</style>
